<template>
  <div>
    <roofVue title="购物车"></roofVue>
    <van-cell-group>
      <van-cell title v-show="isbools" value="管理" @click="isbools = !isbools" />
      <van-cell title v-show="!isbools" value="取消" @click="isbools = !isbools" />
    </van-cell-group>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-notice-bar left-icon="volume-o">赶紧去抢iphone12阿</van-notice-bar>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div v-for="i in setcart" :key="i.id" style="position: relative;">
          <van-card
            :num="i.quantity"
            :price="i.product.shopPrice / 100"
            :title="i.product.name"
            :thumb="imgurl + i.product.defaultImg"
            :desc="i.jsonData"
          >
            <template #footer>
              <van-stepper v-model="i.quantity" async-change @change="getupdate(i.quantity)" />
            </template>
          </van-card>
          <van-checkbox :name="i" class="gord"></van-checkbox>
        </div>
      </van-checkbox-group>
    </van-pull-refresh>
    <!-- <van-submit-bar :price="value" button-text="立即支付" @submit="onSubmit" /> -->
    <van-submit-bar
      v-show="isbools"
      :price="value"
      button-text="提交订单"
      @submit="onSubmit"
      style="margin-bottom: 50px;"
    >
      <van-checkbox v-model="checked" @click="checked ? checkAll() : toggleAll()">全选</van-checkbox>
    </van-submit-bar>
    <van-submit-bar
      v-show="!isbools"
      :price="value"
      button-text="删除购物车"
      @submit="ondel"
      style="margin-bottom: 50px;"
    >
      <van-checkbox v-model="checked" @click="checked ? checkAll() : toggleAll()">全选</van-checkbox>
    </van-submit-bar>
    <!-- <div style="height: 66px;"></div> -->
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      setcart: null,
      value: 0,
      result: [],
      checked: false,
      isLoading: false,
      jishu: 1,
      isbools: true
    }
  },
  components: {
    roofVue,
  },
  methods: {
    get() {
      this.$post(this.url2 + "/cart/selectCart ", {
        userId: this.$store.state.user.id
      }).then(res => {
        console.log(res);
        if (res.errorCode == '0') {
          this.setcart = res.data.orderItemList
          // this.setcart.map(nus=>{
          //   this.
          // })
        }
      })
    },
    // 提交订单
    onSubmit(index) {
      let orderItemList = []
      this.result.map(nus => {
        let obj = {
          "id": nus.id, "productId": nus.product.id, "quantity": nus.quantity
        }
        orderItemList.push(obj)
      })
      this.$post(this.url + "cart/checkout/addPayMent", {
        userId: this.$store.state.user.id,
        orderItemList
      }).then(res => {
        this.$dialog({ message: "添加订单成功" })
      })
      console.log(index);
      this.$toast.fail({ message: "支付功能暂时未开发" })
    },
    // 全选
    checkAll() {

      this.$refs.checkboxGroup.toggleAll(true);
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    // 刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        // this.count++;
      }, 1000);
    },
    // 更新
    getupdate(value) {
      let nu = 0
      this.result.forEach(e => {
        nu += e.price * e.quantity
      });
      this.value = nu
      if (this.result.length == this.setcart.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    // 删除
    ondel() {
      console.log("?");
      this.result.forEach(e => {
        this.$post(this.url2 + "/cart/cleanCart", {
          userId: this.$store.state.user.id,
          itemNum: e.id
        }).then(res => {
          console.log(res);
          if (res.errorCode == '0') {
            this.$dialog({ message: "删除成功" });
            this.$store.commit('setbage', this.$store.state.badge - 1)
            this.get();
          }
        })
      })
    }

  },
  created() {
    this.get()
  },
  watch: {
    // 累计添加金额
    result() {
      console.log(this.result);
      let nu = 0
      this.result.forEach(e => {
        nu += e.product.shopPrice * e.quantity
      });
      this.value = nu
      if (this.result.length == this.setcart.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
};
</script>

<style  scoped>
.gord {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

